<template>
  <el-dialog
    title="提示"
    :visible.sync="visible"
    width="30%"
    :before-close="handleClose"
    append-to-body
  >
    <!-- <span>这是一段信息</span> -->
    <el-form ref="form" :model="dateForm" label-width="80px">
      <el-col :span="24">
        <el-form-item label="测试">
          <el-input v-model="dateForm.remark"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="文件信息">
          <!-- <el-input v-model="dateForm.fileInfoJosn"></el-input> -->
          <el-upload
            class="upload-demo"
            :action="uploadUrl()"
            :http-request="uploadFile"
            :headers="{ Authorization: 1 }"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-change="handleChange"
            :limit="3"
          >
            <el-button size="small" type="button">
              <i class="el-icon-upload">
                <span>点击上传</span>
              </i>
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import fileapi from "@/api/file";

export default {
  data() {
    return {
      visible: false,
      dateForm: {
        type: undefined,
        remark: undefined,
        fileInfo: [],
        fileInfoJosn: undefined,
      },
      fileList: [],
      formData: "",
    };
  },
  created() {},
  methods: {
    uploadUrl() {
      return `http://localhost:60281/api/Files/Uploader`;
    },
    init(id) {
      this.visible = true;
      fileapi.getFileId(id).then((res) => {
        this.dateForm = res;
        this.fileList = res.fileInfo;
        this.dateForm.fileInfo = res.fileInfo;
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleChange(file, fileList) {
      // this.fileList = fileList.slice(-1);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    uploadFile(file) {
      let FormDatas = new FormData();
      FormDatas.append("file", file.file);
      fileapi.Uploader(FormDatas).then((res) => {
        this.dateForm.fileInfo.push(res);
        console.log(this.dateForm)
      });
      // this.fileList.push({
      //   fileId: file.file.uid,
      //   name: file.file.name,
      //   url: file.file.type,
      // });
      // console.log(this.fileList);
      //this.fileList.push(file.file);
      // this.formData.append("file", file.file);
    },
    beforeUpload(file) {
      // 在上传之前的钩子，返回 false 可以取消上传
      //console.log(file);
      //this.fileList.push(file);
      // 手动进行文件处理，比如压缩、格式转换等

      return true;
    },
    submit() {
      console.log(this.dateForm); 
      fileapi.update(this.dateForm).then((res) => {
        console.log(res);
      });
      console.log(this.fileList);
    },
  },
};
</script>
<style scoped>
</style>